<template>
   <el-dialog
      title="选择数据权限"
      v-model="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
   >
      <div class="permission-tree-container">
         <el-card>
            <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
               <span>机构名称</span>
               <span>机构编号</span>
            </div>
            <div>
               <!-- 有数据时显示树形控件 -->
               <el-tree
                  v-if="treeData.length > 0"
                  ref="permissionTreeRef"
                  :data="treeData"
                  node-key="id"
                  show-checkbox
                  default-expand-all
                  highlight-current
                  :default-expanded-keys="['province_default', 'city_default']"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-strictly="checkStrictly"
                  @check="handleCheckChange"
               >
                  <template #default="{ node, data }">
                     <div class="custom-tree-node">
                        <span>
                           <span
                              v-if="data.nodeType === 'province'"
                              class="organization-tag province-tag"
                              >[{{ data.province }}]</span
                           >
                           <span
                              v-else-if="data.nodeType === 'city'"
                              class="organization-tag city-tag"
                              >[所有门店]</span
                           >
                           {{ data.title || data.name }}
                        </span>
                        <span
                           v-if="data.nodeType === 'store'"
                           class="merchant-id"
                           >{{ data.id }}</span
                        >
                     </div>
                  </template>
               </el-tree>

               <!-- 无数据时显示空状态 -->
               <el-empty
                  v-else
                  description="暂无数据权限"
                  :image-size="200"
               >
                  <el-button
                     type="primary"
                     @click="retryLoadData"
                     >重新加载</el-button
                  >
               </el-empty>
            </div>
         </el-card>
      </div>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="cancelSelection">取消</el-button>
            <el-button
               type="primary"
               @click="handleConfirm"
               :disabled="treeData.length === 0"
               >确定</el-button
            >
         </div>
      </template>
   </el-dialog>
</template>

<script setup>
   import { ref, onMounted, reactive, computed, nextTick } from "vue";
   import { ElMessage } from "element-plus";
   import api from "@/api/index.js";

   const emit = defineEmits(["confirm", "update:modelValue", "cancel"]);

   const dialogVisible = ref(false);
   const permissionTreeRef = ref(null);
   const checkStrictly = ref(false); // 关闭严格模式，启用父子节点联动
   const rawData = ref([]); // 原始数据
   const treeData = ref([]); // 处理后的树形数据
   const selectedNodes = ref([]);
   const initialSelectedKeys = ref([]);
   const isAddingNewUser = ref(false);

   // 账号id
   const accountId = ref(null);
   // 获取本地存储userInfo里面的id
   const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
   accountId.value = userInfo.id;

   // 树形控件属性配置
   const defaultProps = {
      children: "children",
      label: (label) => {
         if (label.nodeType === "province") return label.province;
         if (label.nodeType === "city") return label.city;
         return label.title;
      },
   };

   // 模拟数据，用于API返回为空时测试
   const mockData = ref([

   ]);

   // 将原始数据转换为树形结构（处理扁平结构的数据）
   const convertToTreeData = (data) => {
      if (!data || !Array.isArray(data)) return [];

      // 判断数据是否为扁平结构的门店列表
      const isSimpleList = data.length > 0 && data[0].hasOwnProperty("id") && data[0].hasOwnProperty("title");

      // 如果是扁平结构的数据（直接返回的门店列表）
      if (isSimpleList) {
         // 创建一个默认的省市结构
         const defaultProvince = {
            id: "province_default",
            province: "所有区域",
            nodeType: "province",
            children: [
               {
                  id: "city_default",
                  city: "所有门店",
                  province: "所有区域",
                  nodeType: "city",
                  children: [],
               },
            ],
         };

         // 将所有门店添加到默认城市下
         data.forEach((store) => {
            // 为每个门店加上[点位]前缀
            const title = store.title ? `[点位] ${store.title}` : store.title;
            
            defaultProvince.children[0].children.push({
               ...store,
               title,
               nodeType: "store"
            });
         });

         return [defaultProvince];
      }

      // 以下为处理原有的层级结构数据
      const result = [];
      const provinceMap = new Map();

      // 第一次遍历，建立省份节点
      data.forEach((provinceItem) => {
         if (!provinceMap.has(provinceItem.province)) {
            const provinceNode = {
               id: `province_${provinceItem.province}`,
               province: provinceItem.province,
               nodeType: "province",
               children: [],
            };
            provinceMap.set(provinceItem.province, provinceNode);
            result.push(provinceNode);
         }

         const provinceNode = provinceMap.get(provinceItem.province);
         const cityNode = {
            id: `city_${provinceItem.province}_${provinceItem.city}`,
            city: provinceItem.city,
            province: provinceItem.province,
            nodeType: "city",
            count: provinceItem.count,
            children: [],
         };

         // 添加城市下的服务点
         if (provinceItem.list && Array.isArray(provinceItem.list)) {
            provinceItem.list.forEach((store) => {
               const title = store.title ? `[点位] ${store.title}` : store.title;
               
               cityNode.children.push({
                  ...store,
                  title,
                  nodeType: "store"
               });
            });
         }

         provinceNode.children.push(cityNode);
      });

      return result;
   };

   /**
    * 重置所有选中状态
    * 清除树中所有已选中的节点
    */
   const resetAllCheckedNodes = () => {
      if (!permissionTreeRef.value) return;

      // 清空所有选中状态
      permissionTreeRef.value.setCheckedKeys([]);
      // 更新选中节点状态
      updateSelectedNodes();
   };

   /**
    * 加载门店树形数据
    * @param {Boolean} isNewUser - 是否是添加新用户
    * @param {Boolean} useMockData - 是否使用模拟数据（测试用）
    * @returns {Promise} - 返回Promise以支持异步等待
    */
   const loadShopTreeData = async (isNewUser = false, useMockData = false) => {
      try {
         // 构建API请求参数
         const params = {
            id: accountId.value || null,
         };

         // 新增用户时，添加标记参数
         if (isNewUser) {
            params.is_new = 1; // 添加标记，告知后端不需要返回默认选中项
            isAddingNewUser.value = true;
         } else {
            isAddingNewUser.value = false;
         }

         // 清空选中状态和数据
         treeData.value = [];
         resetAllCheckedNodes();

         // 如果指定使用模拟数据，直接使用模拟数据
         if (useMockData) {
            console.log("使用模拟数据");
            rawData.value = mockData.value;
            treeData.value = convertToTreeData(mockData.value);

            // 异步等待DOM更新并设置选中状态
            await nextTick();
            if (initialSelectedKeys.value.length > 0 && permissionTreeRef.value) {
               permissionTreeRef.value.setCheckedKeys(initialSelectedKeys.value);
               updateSelectedNodes();
            }
            return;
         }

         // 调用API获取数据
         console.log("发送API请求获取数据权限:", params);
         const res = await api.authority.getShopList(params);

         if (res.code === 200) {
            // 处理API返回的数据
            rawData.value = res.data || [];
            if (rawData.value.length === 0) {
               console.log("API返回空数据，使用模拟数据");
               rawData.value = mockData.value;
            }
            
            // 转换为树形结构
            treeData.value = convertToTreeData(rawData.value);
            console.log("树形数据处理完成:", treeData.value);

            // 异步等待DOM更新并设置选中状态
            await nextTick();
            
            // 设置初始选中的节点
            if (initialSelectedKeys.value.length > 0 && permissionTreeRef.value) {
               console.log("设置初始选中状态:", initialSelectedKeys.value);
               permissionTreeRef.value.setCheckedKeys(initialSelectedKeys.value);
               updateSelectedNodes();
            }
         } else {
            console.error("获取数据权限失败:", res.msg);
            ElMessage.error(res.msg || "获取数据权限失败");
            
            // 失败时使用模拟数据
            rawData.value = mockData.value;
            treeData.value = convertToTreeData(mockData.value);
         }
      } catch (error) {
         console.error("加载门店树形数据出错:", error);
         ElMessage.error("加载数据权限出错");
         
         // 出错时使用模拟数据
         rawData.value = mockData.value;
         treeData.value = convertToTreeData(mockData.value);
      }
   };

   // 处理节点选中状态变化
   const handleCheckChange = (data, checked) => {
      console.log('节点选中状态变化:', data, checked);
      
      // 在非严格模式下，Element Plus已经处理了父子节点的联动关系
      // 我们只需要更新选中的节点状态即可
      updateSelectedNodes();
   };

   // 更新选中的节点
   const updateSelectedNodes = () => {
      if (!permissionTreeRef.value) return;

      // 在非严格模式下，使用getCheckedNodes的第二个参数为true，只获取叶子节点
      // 这样只会获取店铺节点，而不会包含父级节点
      const checkedNodes = permissionTreeRef.value.getCheckedNodes(false, true);
      
      // 再次过滤，确保只获取店铺节点
      const storeNodes = checkedNodes.filter((node) => node.nodeType === "store");
      selectedNodes.value = storeNodes;

      console.log("当前选中的节点:", storeNodes);
   };

   // 取消选择
   const cancelSelection = () => {
      dialogVisible.value = false;
      emit("cancel");
   };

   // 确认选择
   const handleConfirm = () => {
      updateSelectedNodes();

      const storeNodes = selectedNodes.value;
      const checkedKeys = storeNodes.map((node) => node.id);

      if (checkedKeys.length === 0) {
         ElMessage.warning("请至少选择一个服务点");
         return;
      }
      emit("confirm", {
         nodes: storeNodes,
         keys: checkedKeys,
      });
      dialogVisible.value = false;
   };

   // 设置已选权限
   const setCheckedKeys = (keys = []) => {
      if (permissionTreeRef.value && Array.isArray(keys)) {
         // 设置选中状态
         permissionTreeRef.value.setCheckedKeys(keys);
         
         // 延时更新，确保DOM更新后再获取节点
         setTimeout(() => {
            updateSelectedNodes();
         }, 100);
      }
   };

   /**
    * 打开权限选择对话框
    * @param {Array} selectedKeys 已选中的键数组
    * @param {Boolean} isAddMode 是否为添加新用户模式
    */
   const openDialog = async (selectedKeys = [], isAddMode = false) => {
      console.log("接收到的已选中keys:", selectedKeys, "isAddMode:", isAddMode);
      dialogVisible.value = true;
      isAddingNewUser.value = isAddMode;
      
      // 清空当前选中状态
      selectedNodes.value = [];
      initialSelectedKeys.value = Array.isArray(selectedKeys) ? [...selectedKeys] : [];
      
      try {
         // 加载树形数据
         await loadShopTreeData(isAddMode);
         
         // 等待下一个DOM更新周期，确保树已经渲染
         await nextTick();
         
         // 设置初始选中状态
         if (initialSelectedKeys.value.length > 0 && permissionTreeRef.value) {
            console.log("设置初始选中keys:", initialSelectedKeys.value);
            permissionTreeRef.value.setCheckedKeys(initialSelectedKeys.value);
            // 更新选中节点状态
            updateSelectedNodes();
         }
      } catch (error) {
         console.error("打开权限选择对话框出错:", error);
         ElMessage.error("加载数据权限出错");
      }
   };

   // 重新加载数据
   const retryLoadData = () => {
      loadShopTreeData(false, true);
   };

   // 对外暴露方法
   defineExpose({
      openDialog,
      setCheckedKeys,
   });
</script>

<style lang="scss" scoped>
   .permission-tree-container {
      height: auto;
      overflow-y: auto;
   }

   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
   }

   .organization-tag {
      margin-right: 5px;
      font-size: 12px;
   }

   .merchant-id {
      color: #909399;
      font-size: 12px;
   }

   .province-tag {
      color: #409eff;
   }

   .city-tag {
      color: #67c23a;
   }

   .store-tag {
      color: #e6a23c;
   }

   .dialog-footer {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding-top: 10px;
   }
</style>
